<template>
    <div class="subject">
        <span>{{ num1 }}</span>
        <span>+</span>
        <span>{{ num2 }}</span>
        <span>=</span>
        <input type="number" v-model="answer" />
        <button @click="submit">提交</button>
    </div>
</template>

<script>
export default {
    props: ['num1', 'num2', 'i'],
    data() {
        return {
            answer: null
        }
    },
    methods: {
        submit() {
            if (this.answer !== null) {
                this.$emit('success', {
                    index: this.i,
                    isRight: this.num1 + this.num2 == this.answer ? true : false
                })
            }
        }
    }
};
</script>

<style scoped>
.subject {
    margin: 5px;
    padding: 5px;
    font-size: 20px;
}

.subject span {
    display: inline-block;
    text-align: center;
    width: 20px;
}

.subject input {
    width: 50px;
    height: 20px;
}
</style>